<template>
  <div class="statistics">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <div class="header">
            <span>总销售额</span>
            <a-tooltip>
              <template slot="title">
                指标说明
              </template>
              <a-icon type="info-circle" />
            </a-tooltip>
          </div>
          <div class="total">
            <span>￥ 189,123</span>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <div class="header">
            <span>访问量</span>
            <a-tooltip>
              <template slot="title">
                指标说明
              </template>
              <a-icon type="info-circle" />
            </a-tooltip>
          </div>
          <div class="total">
            <span>￥ 189,123</span>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <div class="header">
            <span>支付笔数</span>
            <a-tooltip>
              <template slot="title">
                指标说明
              </template>
              <a-icon type="info-circle" />
            </a-tooltip>
          </div>
          <div class="total">
            <span>￥ 189,123</span>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <div class="header">
            <span>运营活动效果</span>
            <a-tooltip>
              <template slot="title">
                指标说明
              </template>
              <a-icon type="info-circle" />
            </a-tooltip>
          </div>
          <div class="total">
            <span>￥ 189,123</span>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Statistics'
}
</script>

<style lang="less" scoped>
.statistics {
  .gutter-box {
    padding: 20px 24px 8px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 2px;
    .header {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
    .total {
      line-height: 30px;
      font-size: 30px;
      margin: 10px 0px;
    }
  }
}
</style>